<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 第一步 引入mui css -->
    <link rel="stylesheet" href="./assets/mui/css/mui.css">
    <!-- 第二步引入我们的base.css -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 第三步引入我们的index.css -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./assets/fontAwesome/css/font-awesome.min.css">

</head>

<body>
    <div class="mui-inner-wrap">
        <!-- 主页面标题   头部-->
        <header class="mui-bar mui-bar-nav  header">
            <a class="mui-icon mui-action-menu   mui-icon-search mui-pull-right"></a>
            <h1 class="mui-title">嗨淘代购</h1>
        </header>
        <!-- 主体内容部分 -->
        <div class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!-- 1 轮播图 -->
                <div id="slider" class="mui-slider">
                    <div class="mui-slider-group mui-slider-loop">
                        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="./images/banner4.png">
                            </a>
                        </div>
                        <!-- 第一张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="./images/banner1.png">
                            </a>
                        </div>
                        <!-- 第二张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="./images/banner2.png">
                            </a>
                        </div>
                        <!-- 第三张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="./images/banner3.png">
                            </a>
                        </div>
                        <!-- 第四张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="./images/banner4.png">
                            </a>
                        </div>
                        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="./images/banner1.png">
                            </a>
                        </div>
                    </div>
                    <div class="mui-slider-indicator">
                        <div class="mui-indicator mui-active"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                    </div>
                </div>
                <!--  2导航栏-->
                <div class="navBox">

                    <ul class="nav">
                        <li><a href="#"><img src="./images/nav1.png" alt=""></a></li>
                        <li><a href="#"><img src="./images/nav2.png" alt=""></a></li>
                        <li><a href="#"><img src="./images/nav3.png" alt=""></a></li>
                        <li><a href="#"><img src="./images/nav4.png" alt=""></a></li>
                        <li><a href="#"><img src="./images/nav5.png" alt=""></a></li>
                        <li><a href="#"><img src="./images/nav6.png" alt=""></a></li>
                    </ul>

                    <!-- 品牌专区 -->
                    <div class="productsBox">
                        <h2>
                            <a href="#">
                                <img src="./images/title0.png" alt="">
                            </a>
                        </h2>
                        <ul>
                            <li><a href="#"><img src="./images/brand1.png" alt=""></a></li>
                            <li><a href="#"><img src="./images/brand2.png" alt=""></a></li>
                            <li><a href="#"><img src="./images/brand3.png" alt=""></a></li>
                            <li><a href="#"><img src="./images/brand4.png" alt=""></a></li>
                            <li><a href="#"><img src="./images/brand5.png" alt=""></a></li>
                            <li><a href="#"><img src="./images/brand6.png" alt=""></a></li>
                            <li><a href="#"><img src="./images/brand7.png" alt=""></a></li>
                            <li><a href="#"><img src="./images/brand8.png" alt=""></a></li>
                        </ul>

                    </div>

                    <!-- 生活专区 -->
                    <div class="lifeBox">
                        <h2>
                            <a href="#">
                                <img src="./images/title1.png" alt="">
                            </a>
                        </h2>

                        <ul class="mui-table-view goodsShow">
                            <li class="mui-table-view-cell mui-media">
                                <a href="javascript:;">
                                    <img class="mui-pull-center" src="./images/product.jpg">
                                    <div class="mui-media-body">
                                        <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
                                        <p class='mui-ellipsis'>
                                            <span class="nowPrice">¥560.00</span>
                                            <span class="oldPrice">¥560.00</span>

                                        </p>
                                        <button type="button" class="mui-btn mui-btn-blue">立即购买</button>
                                    </div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <a href="javascript:;">
                                    <img class="mui-pull-center" src="./images/product.jpg">
                                    <div class="mui-media-body">
                                        <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
                                        <p class='mui-ellipsis'>
                                            <span class="nowPrice">¥560.00</span>
                                            <span class="oldPrice">¥560.00</span>

                                        </p>
                                        <button type="button" class="mui-btn mui-btn-blue">立即购买</button>
                                    </div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <a href="javascript:;">
                                    <img class="mui-pull-center" src="./images/product.jpg">
                                    <div class="mui-media-body">
                                        <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
                                        <p class='mui-ellipsis'>
                                            <span class="nowPrice">¥560.00</span>
                                            <span class="oldPrice">¥560.00</span>

                                        </p>
                                        <button type="button" class="mui-btn mui-btn-blue">立即购买</button>
                                    </div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <a href="javascript:;">
                                    <img class="mui-pull-center" src="./images/product.jpg">
                                    <div class="mui-media-body">
                                        <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
                                        <p class='mui-ellipsis'>
                                            <span class="nowPrice">¥560.00</span>
                                            <span class="oldPrice">¥560.00</span>

                                        </p>
                                        <button type="button" class="mui-btn mui-btn-blue">立即购买</button>
                                    </div>
                                </a>
                            </li>




                        </ul>

                    </div>

                    <!-- 3.运动生活专区 -->

                    <div class="lifeBox">
                        <h2>
                            <a href="#">
                                <img src="./images/title2.png" alt="">
                            </a>
                        </h2>

                        <ul class="mui-table-view goodsShow">
                            <li class="mui-table-view-cell mui-media">
                                <a href="javascript:;">
                                    <img class="mui-pull-center" src="./images/product.jpg">
                                    <div class="mui-media-body">
                                        <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
                                        <p class='mui-ellipsis'>
                                            <span class="nowPrice">¥560.00</span>
                                            <span class="oldPrice">¥560.00</span>

                                        </p>
                                        <button type="button" class="mui-btn mui-btn-blue">立即购买</button>
                                    </div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <a href="javascript:;">
                                    <img class="mui-pull-center" src="./images/product.jpg">
                                    <div class="mui-media-body">
                                        <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
                                        <p class='mui-ellipsis'>
                                            <span class="nowPrice">¥560.00</span>
                                            <span class="oldPrice">¥560.00</span>

                                        </p>
                                        <button type="button" class="mui-btn mui-btn-blue">立即购买</button>
                                    </div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <a href="javascript:;">
                                    <img class="mui-pull-center" src="./images/product.jpg">
                                    <div class="mui-media-body">
                                        <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
                                        <p class='mui-ellipsis'>
                                            <span class="nowPrice">¥560.00</span>
                                            <span class="oldPrice">¥560.00</span>

                                        </p>
                                        <button type="button" class="mui-btn mui-btn-blue">立即购买</button>
                                    </div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <a href="javascript:;">
                                    <img class="mui-pull-center" src="./images/product.jpg">
                                    <div class="mui-media-body">
                                        <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
                                        <p class='mui-ellipsis'>
                                            <span class="nowPrice">¥560.00</span>
                                            <span class="oldPrice">¥560.00</span>

                                        </p>
                                        <button type="button" class="mui-btn mui-btn-blue">立即购买</button>
                                    </div>
                                </a>
                            </li>




                        </ul>

                    </div>
                    <!-- /运动生活专区 -->

                </div>








            </div>
        </div>


        <!-- 底部导航栏 -->
        <nav class="mui-bar mui-bar-tab  footer">
            <a class="mui-tab-item mui-active" href="./index.html">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="./category.html">
                <span class="mui-icon mui-icon-bars"></span>
                <span class="mui-tab-label">分类</span>
            </a>
            <a class="mui-tab-item" href="./cart.html">
                <!-- <span class="mui-icon mui-icon-contact"></span> -->
                <span class=" mui-icon  fa fa-shopping-cart"></span>
                <span class="mui-tab-label">购物</span>
            </a>
            <a class="mui-tab-item" href="./user.html">
                <span class="mui-icon  mui-icon-person"></span>
                <span class="mui-tab-label">个人中心</span>
            </a>
        </nav>



        <script src="./assets/mui/js/mui.min.js"></script>

        <script src="./assets/zepto/zepto.min.js"></script>
        <script src="./js/common.js"></script>
        <script>
            //获得slider插件对象
            var gallery = mui('.mui-slider');
            gallery.slider({
                interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
            });

            /*初始化区域滚动组件 当超过了父容器大小的时候生效*/
            mui('.mui-scroll-wrapper').scroll();
        </script>
</body>

</html>